<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="down_pel_attr">
    <!---------------------------|导航树 -->
    <div class="down_pel_attr_left">
      <NAnchor ref="anchorRef" style="z-index: 1">
        <NAnchorLink title="名称" href="#SvgAttrsName" style="margin-top: 5px" />
        <NAnchorLink title="属性" href="#SvgAttrs" />
        <NAnchorLink title="样式" href="#SvgStyle" />
        <NAnchorLink title="动画" href="#LinkAnimation">
          <div v-for="(Item, index) in selectedPel.animations">
            <NAnchorLink :title="Item.label" :href="'#' + Item.key" @click="onAnimateItem(Item)" />
          </div>
        </NAnchorLink>
        <NAnchorLink title="事件">
          <div v-for="Item in selectedPel.events">
            <NAnchorLink :title="Item.label" :href="'#' + Item.key" @click="onEventItem(Item)" />
          </div>
        </NAnchorLink>
      </NAnchor>
    </div>
    <!---------------------------|名称 -->
    <div class="down_pel_attr_right">
      <!-- 名称 -->
      <div id="SvgAttrsName" class="anchor_link">
        <!-- 图元id  -->
        <div class="h_info">
          <text class="h_info_lable">图元id:</text>
          <text class="h_info_val">{{ selectedPel.key }}</text>
        </div>
        <!-- 图元名称  -->
        <div class="h_info">
          <text class="h_info_lable">图元名称:</text>
          <NInput type="text" class="h_info_val" v-model:value="selectedPel.label" />
        </div>
        <!-- 块标签  -->
        <div class="h_info" v-if="selectedPel.attrs.blockHtml">
          <text class="h_info_lable">块标签:</text>
          <NInput type="textarea" class="h_info_val" v-model:value="selectedPel.attrs.blockHtml.val" />
        </div>
        <!-- 块标签  -->
        <div class="h_info" v-if="selectedPel.attrs.wrapHtml">
          <text class="h_info_lable">包标签:</text>
          <NInput type="textarea" class="h_info_val" v-model:value="selectedPel.attrs.wrapHtml.val" />
        </div>
        <!-- 文本内容-单行  -->
        <div class="h_info" v-if="selectedPel.attrs.textContent">
          <text class="h_info_lable">文本内容:</text>
          <NInput type="text" class="h_info_val" v-model:value="selectedPel.attrs.textContent.val" />
        </div>
        <!-- 文本内容-多行  -->
        <div class="h_info" v-if="selectedPel.attrs.fontContent">
          <text class="h_info_lable">文本内容:</text>
          <NInput type="textarea" class="h_info_val" v-model:value="selectedPel.attrs.fontContent.val" />
        </div>
      </div>

      <!---------------------------| 属性 -->
      <n-divider title-placement="left">尺寸</n-divider>
      <div id="SvgAttrs" class="anchor_link">
        <!-- 轮廓宽度  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeWidth">
          <text class="h_info_lable">轮廓宽度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.strokeWidth.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.strokeWidth.val" />
          </div>
        </div>
        <!-- 起点坐标X1  -->
        <div class="h_info" v-if="selectedPel.attrs.x1">
          <text class="h_info_lable">起点坐标X1:</text>
          <div class="h_flex_column h_info_val" v-if="selectedPel.type !== 'verticalLine' /*垂直线*/">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.x1.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.x1.val" />
          </div>
          <text class="h_info_val" v-if="selectedPel.type === 'verticalLine' /*垂直线*/">{{ selectedPel.attrs.x1.val
          }}</text>
        </div>
        <!-- 起点坐标Y1  -->
        <div class="h_info" v-if="selectedPel.attrs.y1">
          <text class="h_info_lable">起点坐标Y1:</text>
          <div class="h_flex_column h_info_val" v-if="selectedPel.type !== 'horizontaLine' /*水平线*/">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.y1.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.y1.val" />
          </div>
          <text class="h_info_val" v-if="selectedPel.type === 'horizontaLine' /*水平线*/">{{ selectedPel.attrs.y1.val
          }}</text>
        </div>
        <!-- 终点坐标X2  -->
        <div class="h_info" v-if="selectedPel.attrs.x2">
          <text class="h_info_lable">终点坐标X2:</text>
          <div class="h_flex_column h_info_val" v-if="selectedPel.type !== 'verticalLine' /*垂直线*/">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.x2.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.x2.val" />
          </div>
          <text class="h_info_val" v-if="selectedPel.type === 'verticalLine' /*垂直线*/">{{ selectedPel.attrs.x1.val
          }}</text>
        </div>
        <!-- 终点坐标Y2  -->
        <div class="h_info" v-if="selectedPel.attrs.y2">
          <text class="h_info_lable">终点坐标Y2:</text>
          <div class="h_flex_column h_info_val" v-if="selectedPel.type !== 'horizontaLine' /*水平线*/">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.y2.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.y2.val" />
          </div>
          <text class="h_info_val" v-if="selectedPel.type === 'horizontaLine' /*水平线*/">{{ selectedPel.attrs.y1.val
          }}</text>
        </div>
        <!-- 圆心坐标CX  -->
        <div class="h_info" v-if="selectedPel.attrs.cx">
          <text class="h_info_lable">圆心坐标CX:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.cx.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.cx.val" />
          </div>
        </div>
        <!-- 圆心坐标CY -->
        <div class="h_info" v-if="selectedPel.attrs.cy">
          <text class="h_info_lable">圆心坐标CY:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.cy.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.cy.val" />
          </div>
        </div>
        <!-- 半径 -->
        <div class="h_info" v-if="selectedPel.attrs.radius">
          <text class="h_info_lable">半径:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.radius.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.radius.val" />
          </div>
        </div>
        <!-- 椭圆半径RX  -->
        <div class="h_info" v-if="selectedPel.attrs.radiusX">
          <text class="h_info_lable">椭圆半径RX:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.radiusX.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.radiusX.val" />
          </div>
        </div>
        <!-- 椭圆半径RY -->
        <div class="h_info" v-if="selectedPel.attrs.radiusY">
          <text class="h_info_lable">椭圆半径RY:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.radiusY.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.radiusY.val" />
          </div>
        </div>
        <!-- 三点圆弧-起点坐标X -->
        <div class="h_info" v-if="selectedPel.attrs.startX">
          <text class="h_info_lable">起点坐标X:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.startX.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.startX.val" />
          </div>
        </div>
        <!-- 三点圆弧-起点坐标Y -->
        <div class="h_info" v-if="selectedPel.attrs.startY">
          <text class="h_info_lable">起点坐标Y:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.startY.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.startY.val" />
          </div>
        </div>
        <!-- 三点圆弧-终点坐标X -->
        <div class="h_info" v-if="selectedPel.attrs.endX">
          <text class="h_info_lable">终点坐标X:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.endX.val" />
            <NInputNumber :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.endX.val" />
          </div>
        </div>
        <!-- 三点圆弧-终点坐标Y -->
        <div class="h_info" v-if="selectedPel.attrs.endY">
          <text class="h_info_lable">终点坐标Y:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.endY.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.endY.val" />
          </div>
        </div>
        <!-- 三点圆弧-控制点坐标X -->
        <div class="h_info" v-if="selectedPel.attrs.ctrlX">
          <text class="h_info_lable">控制点坐标X:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.ctrlX.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.ctrlX.val" />
          </div>
        </div>
        <!-- 三点圆弧-控制点坐标Y -->
        <div class="h_info" v-if="selectedPel.attrs.ctrlY">
          <text class="h_info_lable">控制点坐标Y:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.ctrlY.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.ctrlY.val" />
          </div>
        </div>
        <!-- 长方形坐标X  -->
        <div class="h_info" v-if="selectedPel.attrs.left">
          <text class="h_info_lable">坐标X:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.left.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.left.val" />
          </div>
        </div>
        <!-- 长方形坐标Y -->
        <div class="h_info" v-if="selectedPel.attrs.top">
          <text class="h_info_lable">坐标Y:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.top.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.top.val" />
          </div>
        </div>
        <!-- 长方形宽度  -->
        <div class="h_info" v-if="selectedPel.attrs.width">
          <text class="h_info_lable">宽度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.width.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.width.val" />
          </div>
        </div>
        <!-- 长方形高度 -->
        <div class="h_info" v-if="selectedPel.attrs.height">
          <text class="h_info_lable">高度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.height.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.height.val" />
          </div>
        </div>
        <!-- 长方形圆角X  -->
        <div class="h_info" v-if="selectedPel.attrs.fx">
          <text class="h_info_lable">长方形圆角X:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" v-model:value="selectedPel.attrs.fx.val" />
            <NInputNumber :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.fx.val" />
          </div>
        </div>
        <!-- 长方形圆角Y -->
        <div class="h_info" v-if="selectedPel.attrs.fy">
          <text class="h_info_lable">长方形圆角Y:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" v-model:value="selectedPel.attrs.fy.val" />
            <NInputNumber :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.fy.val" />
          </div>
        </div>
        <!-- 圆分多边形-半径 -->
        <div class="h_info" v-if="selectedPel.attrs.circleRadius">
          <text class="h_info_lable">半径:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.circleRadius.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.circleRadius.val" />
          </div>
        </div>
        <!-- 圆分多边形-等分数量 -->
        <div class="h_info" v-if="selectedPel.attrs.quantity">
          <text class="h_info_lable">等分数量:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="3" :max="16" :step="1" v-model:value="selectedPel.attrs.quantity.val" />
            <NInputNumber :min="3" :max="16" :step="1" v-model:value="selectedPel.attrs.quantity.val" />
          </div>
        </div>
        <!-- 多边形-坐标-->
        <div class="h_flex_cloum" v-if="selectedPel.attrs.pathPoints">
          <div v-for="(item, index) in selectedPel.attrs.pathPoints.val">
            <!-- 坐标X1  -->
            <div class="h_info">
              <text class="h_info_lable">坐标 X{{ index + 1 }}:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="item.x" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="item.x" />
              </div>
            </div>
            <!-- 坐标Y1  -->
            <div class="h_info">
              <text class="h_info_lable">坐标 Y{{ index + 1 }}:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="item.y" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep" v-model:value="item.y" />
              </div>
            </div>
          </div>
        </div>
        <!-- 路径文本  -->
        <div v-if="selectedPel.attrs.pathText">
          <!-- 使用路径文本 -->
          <div class="h_info">
            <text class="h_info_lable">使用路径文本</text>
            <NSwitch class="h_info_val" v-model:value="selectedPel.attrs.pathText.usePath" />
          </div>
          <template v-if="!selectedPel.attrs.pathText.usePath">
            <!-- 文本坐标X  -->
            <div class="h_info" v-if="selectedPel.attrs.textLeft">
              <text class="h_info_lable">文本坐标X:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.textLeft.val" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.attrs.textLeft.val" />
              </div>

            </div>
            <!-- 文本坐标Y  -->
            <div class="h_info" v-if="selectedPel.attrs.textTop">
              <text class="h_info_lable">文本坐标Y:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.textTop.val" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.attrs.textTop.val" />
              </div>
            </div>
          </template>

          <template v-else>
            <!-- 切线方向的偏移 -->
            <div class="h_info">
              <text class="h_info_lable">路径切线偏移:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.pathText.dx" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="0.01"
                  v-model:value="selectedPel.attrs.pathText.dx" />
              </div>
            </div>
            <!-- 法线方向的偏移 -->
            <div class="h_info">
              <text class="h_info_lable">路径法线偏移:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.pathText.dy" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="0.01"
                  v-model:value="selectedPel.attrs.pathText.dy" />
              </div>
            </div>
            <!-- 路径标签  -->
            <div class="h_info">
              <text class="h_info_lable">路径标签:</text>
              <NInput type="textarea" class="h_info_val" v-model:value="selectedPel.attrs.pathText.pathHtml" />
            </div>
          </template>

        </div>
        <!-- 图片数据  -->
        <div class="h_info" v-if="selectedPel.attrs.imageData">
          <text class="h_info_lable">图片数据:</text>
          <div class="h_flex_cloumn" style="width:100%">
            <NInput type="textarea" style="width:100%" v-model:value="selectedPel.attrs.imageData.val" />
            <div style="height: 10px;"></div>
            <div class="h_flex_row_end">
              <NButton @click="onOpenFileDialog">选择图片文件</NButton>
              <div style="width: 10px;"></div>
              <NButton @click="selectedPel.attrs.imageData.val = ''">清理</NButton>
              <div style="width: 30px;"></div>
            </div>
          </div>

        </div>
        <!-- 视图盒子x坐标  -->
        <div class="h_info" v-if="selectedPel.attrs.boxLeft">
          <text class="h_info_lable">盒子x坐标 :</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.boxLeft.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.boxLeft.val" />
          </div>
        </div>
        <!-- 视图盒子y坐标 -->
        <div class="h_info" v-if="selectedPel.attrs.boxTop">
          <text class="h_info_lable">盒子y坐标:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.boxTop.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.boxTop.val" />
          </div>
        </div>
        <!-- 视图盒子宽  -->
        <div class="h_info" v-if="selectedPel.attrs.boxWidth">
          <text class="h_info_lable">盒子宽:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.boxWidth.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.boxWidth.val" />
          </div>
        </div>
        <!-- 视图盒子高 -->
        <div class="h_info" v-if="selectedPel.attrs.boxHeight">
          <text class="h_info_lable">盒子高:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="sliderMax" v-model:value="selectedPel.attrs.boxHeight.val" />
            <NInputNumber :min="0" :max="sliderMax" :step="sliderStep" v-model:value="selectedPel.attrs.boxHeight.val" />
          </div>
        </div>
        <!-- 旋转 -->
        <div class="h_info" v-if="selectedPel.attrs.rotate">
          <text class="h_info_lable">旋转:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-360" :max="360" v-model:value="selectedPel.attrs.rotate.val" />
            <NInputNumber :min="-360" :max="360" :step="0.001" v-model:value="selectedPel.attrs.rotate.val" />
          </div>
        </div>
        <!-- 缩放 -->
        <div class="h_info" v-if="selectedPel.attrs.scale">
          <text class="h_info_lable">缩放:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="5" :step="0.01" v-model:value="selectedPel.attrs.scale.val" />
            <NInputNumber :step="0.01" v-model:value="selectedPel.attrs.scale.val" />
          </div>
        </div>
        <!-- 水平移动 -->
        <div class="h_info" v-if="selectedPel.attrs.translateX">
          <text class="h_info_lable">水平移动:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.translateX.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.attrs.translateX.val" />
          </div>
        </div>
        <!-- 垂直移动 -->
        <div class="h_info" v-if="selectedPel.attrs.translateY">
          <text class="h_info_lable">垂直移动:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.translateY.val" />
            <NInputNumber :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.attrs.translateY.val" />
          </div>
        </div>
        <!-- 水平拉伸 -->
        <div class="h_info" v-if="selectedPel.attrs.skewX">
          <text class="h_info_lable">水平拉伸:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-100" :max="100" v-model:value="selectedPel.attrs.skewX.val" />
            <NInputNumber :min="-100" :max="100" :step="0.001" v-model:value="selectedPel.attrs.skewX.val" />
          </div>
        </div>
        <!-- 垂直拉伸 -->
        <div class="h_info" v-if="selectedPel.attrs.skewY">
          <text class="h_info_lable">垂直拉伸:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-100" :max="100" v-model:value="selectedPel.attrs.skewY.val" />
            <NInputNumber :min="-100" :max="100" :step="0.001" v-model:value="selectedPel.attrs.skewY.val" />
          </div>
        </div>

      </div>

      <!---------------------------|样式 -->
      <n-divider title-placement="left">样式</n-divider>
      <div id="SvgStyle" class="anchor_link">
        <!-- 轮廓端点形状  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeLinecap">
          <text class="h_info_lable">轮廓端点形状:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.strokeLinecap.val" :options="lineCapOpt" />
        </div>
        <!-- 边框样式  -->
        <div class="h_info" v-if="selectedPel.attrs.borderStyle">
          <text class="h_info_lable">边框样式:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.borderStyle.val" :options="borderStyleOpt" />
        </div>
        <!-- 边框宽度  -->
        <div class="h_info" v-if="selectedPel.attrs.borderWidth && selectedPel.attrs.borderStyle.val !== 'none'
        ">
          <text class="h_info_lable">边框宽度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.borderWidth.val" />
            <NInputNumber :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.borderWidth.val" />
          </div>
        </div>
        <!-- 边框圆角 -->
        <div class="h_info" v-if="selectedPel.attrs.borderRadius && selectedPel.attrs.borderStyle.val !== 'none'
        ">
          <text class="h_info_lable">边框圆角:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.borderRadius.val" />
            <NInputNumber :min="0" :max="10000" :step="1" v-model:value="selectedPel.attrs.borderRadius.val" />
          </div>
        </div>
        <!-- 叠放层级 -->
        <div class="h_info" v-if="selectedPel.attrs.zIndex">
          <text class="h_info_lable">叠放层级:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="10000" :step="1" v-model:value="selectedPel.attrs.zIndex.val" />
            <NInputNumber :min="1" :max="10000" :step="1" v-model:value="selectedPel.attrs.zIndex.val" />
          </div>
        </div>
        <!-- 虚线  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeDasharray">
          <text class="h_info_lable">虚线:</text>
          <NInput type="text" class="h_info_val" v-model:value="selectedPel.attrs.strokeDasharray.val" />
        </div>
        <!-- 虚线偏移  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeDashoffset">
          <text class="h_info_lable">虚线偏移:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-10000" :max="10000" :step="1" v-model:value="selectedPel.attrs.strokeDashoffset.val" />
            <NInputNumber :min="-10000" :max="10000" :step="1" v-model:value="selectedPel.attrs.strokeDashoffset.val" />
          </div>
        </div>
        <!-- 轮廓端点形状  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeLinecap">
          <text class="h_info_lable">轮廓端点形状:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.strokeLinecap.val" :options="lineCapOpt" />
        </div>
        <!-- 线链接样式 -->
        <div class="h_info" v-if="selectedPel.attrs.strokeLinejoin">
          <text class="h_info_lable">线链接样式:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.strokeLinejoin.val" :options="linejoinOpt" />
        </div>
        <!-- 填充 -->
        <div v-if="selectedPel.attrs.fill">
          <!-- 填充颜色 -->
          <div class="h_info">
            <text class="h_info_lable">填充颜色:</text>
            <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.fill.val" :actions="['confirm']"
              :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
          </div>
          <!-- 填充选项 -->
          <div class="h_info">
            <text class="h_info_lable">填充选项:</text>
            <NSelect class="h_info_val" v-model:value="selectedPel.attrs.fill.fillOpt" :options="fillOpt" />
          </div>
          <!-- 填充图案 -->
          <div v-if="selectedPel.attrs.fill.fillOpt === 2">
            <!-- 填充样式-->
            <div class="h_info">
              <text class="h_info_lable">填充样式:</text>
              <NSelect class="h_info_val" v-model:value="selectedPel.attrs.fill.fillPattern" :options="patternFillOpt" />
            </div>
            <!-- 填充尺寸 -->
            <div class="h_info">
              <text class="h_info_lable">填充尺寸:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0.001" :max="100" v-model:value="selectedPel.attrs.fill.fillSize" />
                <NInputNumber :min="0.001" :max="100" :step="0.01" v-model:value="selectedPel.attrs.fill.fillSize" />
              </div>
            </div>
            <!-- 填充比例 -->
            <div class="h_info">
              <text class="h_info_lable">填充比例:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0.001" :max="100" v-model:value="selectedPel.attrs.fill.fillRatio" />
                <NInputNumber :min="0.001" :max="100" :step="0.01" v-model:value="selectedPel.attrs.fill.fillRatio" />
              </div>
            </div>
          </div>
          <!-- 线性渐变填充 -->
          <div v-if="selectedPel.attrs.fill.fillOpt === 3">
            <!-- 水平填充X1  -->
            <div class="h_info">
              <text class="h_info_lable">水平填充X1:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillX1" />
                <NInputNumber :min="0" :max="100" :step="1" v-model:value="selectedPel.attrs.fill.fillX1" />
              </div>
            </div>
            <!-- 水平填充X2  -->
            <div class="h_info">
              <text class="h_info_lable">水平填充X2:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillX2" />
                <NInputNumber :min="0" :max="100" :step="1" v-model:value="selectedPel.attrs.fill.fillX2" />
              </div>
            </div>
            <!-- 垂直填充Y1  -->
            <div class="h_info">
              <text class="h_info_lable">垂直填充Y1:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillY1" />
                <NInputNumber :min="0" :max="100" :step="1" v-model:value="selectedPel.attrs.fill.fillY1" />
              </div>
            </div>
            <!-- 垂直填充Y2  -->
            <div class="h_info">
              <text class="h_info_lable">垂直填充Y2:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillY2" />
                <NInputNumber :min="0" :max="100" :step="1" v-model:value="selectedPel.attrs.fill.fillY2" />
              </div>
            </div>
            <!-- 颜色及偏移量-->
            <div class="h_flex_column" v-for="(element, index) in selectedPel.attrs.fill.offsets" :key="index">
              <div class="h_info">
                <div style="padding-left: 3px; width: 190px">
                  {{ index }}号颜色及偏移量:
                </div>
                <div class="h_flex_column h_info_val">
                  <NColorPicker class="h_info_val" v-model:value="element.color" :actions="['confirm']" :modes="['rgb']"
                    :swatches="colorOpt" :show-alpha="true" />
                  <NSlider v-model:value="element.offset" :max="100" />
                </div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                      v-html="onGetDataManagerIcon('dataNewIcon')" @click.stop="onGradientAdd()"></svg>
                  </template>
                  <span>添加渐变项目</span>
                </NTooltip>
                <div style="width: 10px"></div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                      v-html="onGetDataManagerIcon('dataDeleteIcon')" @click.stop="onGradientDelete(index)"></svg>
                  </template>
                  <span>删除渐变项目</span>
                </NTooltip>
                <div style="width: 30px"></div>
              </div>
            </div>
          </div>
          <!-- 放射渐变填充 -->
          <div v-if="selectedPel.attrs.fill.fillOpt === 4">
            <!-- 渐变圆心CX  -->
            <div class="h_info">
              <text class="h_info_lable">渐变圆心CX:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillCX" />
                <NInputNumber :min="0" :max="100" :step="0.001" v-model:value="selectedPel.attrs.fill.fillCX" />
              </div>
            </div>
            <!-- 渐变圆心CY  -->
            <div class="h_info">
              <text class="h_info_lable">渐变圆心CY:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="100" v-model:value="selectedPel.attrs.fill.fillCY" />
                <NInputNumber :min="0" :max="100" :step="0.001" v-model:value="selectedPel.attrs.fill.fillCY" />
              </div>
            </div>
            <!-- 渐变圆心半径  -->
            <div class="h_info">
              <text class="h_info_lable">渐变圆心半径:</text>
              <div class="h_flex_column h_info_val">
                <NSlider :min="0" :max="200" v-model:value="selectedPel.attrs.fill.fillR" />
                <NInputNumber :min="0" :max="200" :step="0.001" v-model:value="selectedPel.attrs.fill.fillR" />
              </div>
            </div>
            <!-- 颜色及偏移量-->
            <div class="h_flex_column" v-for="(element, index) in selectedPel.attrs.fill.offsets" :key="index">
              <div class="h_info">
                <div style="padding-left: 3px; width: 190px">
                  {{ index }}号颜色及偏移量:
                </div>
                <div class="h_flex_column h_info_val">
                  <NColorPicker class="h_info_val" v-model:value="element.color" :actions="['confirm']" :modes="['rgb']"
                    :swatches="colorOpt" :show-alpha="true" />
                  <NSlider v-model:value="element.offset" :max="100" />
                </div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                      v-html="onGetDataManagerIcon('dataNewIcon')" @click.stop="onGradientAdd()"></svg>
                  </template>
                  <span>添加渐变项目</span>
                </NTooltip>
                <div style="width: 10px"></div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                      v-html="onGetDataManagerIcon('dataDeleteIcon')" @click.stop="onGradientDelete(index)"></svg>
                  </template>
                  <span>删除渐变项目</span>
                </NTooltip>
                <div style="width: 30px"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 轮廓颜色 -->
        <div class="h_info" v-if="selectedPel.attrs.stroke">
          <text class="h_info_lable">轮廓颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.stroke.val" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 图片-边框颜色 -->
        <div class="h_info" v-if="selectedPel.attrs.borderColor && selectedPel.attrs.borderStyle.val !== 'none'
        ">
          <text class="h_info_lable">边框颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.borderColor.val" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 文本颜色 -->
        <div class="h_info" v-if="selectedPel.attrs.fontColor">
          <text class="h_info_lable">文本颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.fontColor.val" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 背景颜色 -->
        <div class="h_info" v-if="selectedPel.attrs.backgroundColor">
          <text class="h_info_lable">背景颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.backgroundColor.val" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 阴影颜色 -->
        <div class="h_info" v-if="selectedPel.attrs.shadowColor">
          <text class="h_info_lable">阴影颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="selectedPel.attrs.shadowColor.val" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 水平阴影距离 -->
        <div class="h_info" v-if="selectedPel.attrs.shadowHorizontal">
          <text class="h_info_lable">水平阴影距离:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-1000" :max="1000" :step="1" v-model:value="selectedPel.attrs.shadowHorizontal.val" />
            <NInputNumber :min="-1000" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.shadowHorizontal.val" />
          </div>
        </div>
        <!-- 垂直阴影距离 -->
        <div class="h_info" v-if="selectedPel.attrs.shadowVertical">
          <text class="h_info_lable">垂直阴影距离:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="-1000" :max="1000" :step="1" v-model:value="selectedPel.attrs.shadowVertical.val" />
            <NInputNumber :min="-1000" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.shadowVertical.val" />
          </div>
        </div>
        <!-- 模糊阴影 -->
        <div class="h_info" v-if="selectedPel.attrs.shadowvague">
          <text class="h_info_lable">模糊阴影:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="1" v-model:value="selectedPel.attrs.shadowvague.val" />
            <NInputNumber :min="0" :max="100" :step="0.001" v-model:value="selectedPel.attrs.shadowvague.val" />
          </div>
        </div>
        <!-- 透明度_元素  -->
        <div class="h_info" v-if="selectedPel.attrs.opacity">
          <text class="h_info_lable">透明度_元素:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.opacity.val" />
            <NInputNumber :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.opacity.val" />
          </div>
        </div>
        <!-- 填充透明度  -->
        <div class="h_info" v-if="selectedPel.attrs.fillOpacity">
          <text class="h_info_lable">填充透明度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.fillOpacity.val" />
            <NInputNumber :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.fillOpacity.val" />
          </div>
        </div>
        <!-- 轮廓透明度  -->
        <div class="h_info" v-if="selectedPel.attrs.strokeOpacity">
          <text class="h_info_lable">轮廓透明度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.strokeOpacity.val" />
            <NInputNumber :min="0" :max="1" :step="0.01" v-model:value="selectedPel.attrs.strokeOpacity.val" />
          </div>
        </div>
        <!-- 文本高度 -->
        <div class="h_info" v-if="selectedPel.attrs.fontSize">
          <text class="h_info_lable">文本高度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.fontSize.val" />
            <NInputNumber :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.fontSize.val" />
          </div>
        </div>
        <!-- 字符之间的间距 -->
        <div class="h_info" v-if="selectedPel.attrs.letterSpac">
          <text class="h_info_lable">字符之间的间距:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.letterSpac.val" />
            <NInputNumber :min="0" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.letterSpac.val" />
          </div>
        </div>
        <!-- 字间距 -->
        <div class="h_info" v-if="selectedPel.attrs.wordSpac">
          <text class="h_info_lable">字间距:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.wordSpac.val" />
            <NInputNumber :min="0" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.wordSpac.val" />
          </div>
        </div>
        <!-- 文本字体 -->
        <div class="h_info" v-if="selectedPel.attrs.fontFamily">
          <text class="h_info_lable">文本字体:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.fontFamily.val" :options="fontFamilyOpt" />
        </div>
        <!-- 对齐方式 -->
        <div class="h_info" v-if="selectedPel.attrs.textAnchor">
          <text class="h_info_lable">对齐方式:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.textAnchor.val" :options="textAnchorOpt" />
        </div>
        <!-- 文本水平对齐方式 -->
        <div class="h_info" v-if="selectedPel.attrs.textAlign">
          <text class="h_info_lable">文本水平对齐方式:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.textAlign.val" :options="textAnchorOpt" />
        </div>
        <!-- 第一行的缩进 -->
        <div class="h_info" v-if="selectedPel.attrs.textIndent">
          <text class="h_info_lable">第一行的缩进:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.letterSpac.val" />
            <NInputNumber :min="0" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.letterSpac.val" />
          </div>
        </div>
        <!-- 行高 -->
        <div class="h_info" v-if="selectedPel.attrs.rowHeight">
          <text class="h_info_lable">行高:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="1000" :step="1" v-model:value="selectedPel.attrs.rowHeight.val" />
            <NInputNumber :min="0" :max="1000" :step="0.001" v-model:value="selectedPel.attrs.rowHeight.val" />
          </div>
        </div>
        <!-- 划线设置 -->
        <div class="h_info" v-if="selectedPel.attrs.textDecoration">
          <text class="h_info_lable">划线设置:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.textDecoration.val" :options="textDecorationOpt" />
        </div>
        <!-- 文本样式 -->
        <div class="h_info" v-if="selectedPel.attrs.fontStyle">
          <text class="h_info_lable">文本样式:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.fontStyle.val" :options="fontStyleOpt" />
        </div>
        <!-- 文本粗细 -->
        <div class="h_info" v-if="selectedPel.attrs.fontWeight">
          <text class="h_info_lable">文本粗细:</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.attrs.fontWeight.val" :options="fontWeightOpt" />
        </div>


      </div>

      <!---------------------------|动画 -->
      <n-divider id="LinkAnimation" title-placement="left">动画</n-divider>
      <!--动画-->
      <div class="h_flex_row h_padding5" v-for="(Item, index) in selectedPel.animations">
        <!-- 使能开关 -->
        <div :id="Item.key" class="h_info" @click="onAnimateItem(Item)">
          <text class="h_hover_pointer">{{ Item.label }} 动画</text>
          <NSwitch class="h_info_val" v-model:value="Item.enable" />
        </div>
        <!--  -->
      </div>

      <!---------------------------|事件 -->
      <n-divider id="LinkEvent" title-placement="left">事件</n-divider>
      <div class="h_flex_row h_padding5" v-for="(Item, index) in selectedPel.events">
        <!-- 使能开关 -->
        <div :id="Item.key" class="h_info" @click="onEventItem(Item)">
          <text class="h_hover_pointer">{{ Item.label }} 动画</text>
          <NSwitch class="h_info_val" v-model:value="Item.enable" />
        </div>
      </div>
    </div>
  </div>
  <!-- 文件导入 -->
  <input type="file" style="display: none" ref="fileRef" @change="onLeadingIn" />
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from "vue";
import { NButton, useMessage } from 'naive-ui';
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onActionLeftNavigation, // 激活左框导航
  onHideLeftNavigation, // 隐藏左框导航
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态
const message = useMessage()// 消息

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 选择的图元数据 */
let selectedPel = computed(() => canvasStore.selectedPel);
/** 最小值 */
let sliderMin = computed(() => canvasStore.sliderMin);
/** 最大值 */
let sliderMax = computed(() => canvasStore.sliderMax);
/** 步距值 */
let sliderStep = computed(() => canvasStore.sliderStep);
/** 文件参数 */
let fileRef = ref();
/** 图标尺寸 */
const IconSize = 36;
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 从静态存储 引入 选项
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/** 线端点选项 */
let lineCapOpt = staticStore.lineCapOpt;
/** 线链接选项 */
let linejoinOpt = staticStore.linejoinOpt;
/** 颜色选项卡 */
let colorOpt = staticStore.colorOpt;
/** 填充选项 */
let fillOpt = staticStore.fillOpt;
/** 填充选项 */
let patternFillOpt = staticStore.patternFillOpt;
/** 边框样式选项 */
let borderStyleOpt = staticStore.borderStyleOpt;
// 🦢 --------------------------| Svg文本
/** 文本字体 */
let fontFamilyOpt = staticStore.fontFamilyOpt;
/** 对齐方式 */
let textAnchorOpt = staticStore.textAnchorOpt;
/** 划线设置 */
let textDecorationOpt = staticStore.textDecorationOpt;
/** 文本样式 */
let fontStyleOpt = staticStore.fontStyleOpt;
/** 文本样式 */
let fontWeightOpt = staticStore.fontWeightOpt;

/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */

/** 选择动画项 */
const onAnimateItem = (item: any) => {
 // console.log("选择动画项")
 // console.log(item.key)
  canvasStore.animatKey = item.key; // 设置-动画键
  onActionLeftNavigation("LeftDraw"); // 激活左框导航
  onHideLeftNavigation("LeftEvent"); // 隐藏-事件
  setTimeout(() => {
    onActionLeftNavigation("LeftAnimation"); // 激活左框导航
  }, 10);
};

/** 选择事件项 */
const onEventItem = (item: any) => {
 // console.log("选择事件项")
 // console.log(item.key)
  canvasStore.eventKey = item.key; // 设置-事件键
  onActionLeftNavigation("LeftDraw"); // 激活左框导航
  onHideLeftNavigation("LeftAnimation"); // 隐藏-动画
  setTimeout(() => {
    onActionLeftNavigation("LeftEvent"); // 激活左框导航
  }, 10);
};

/** 添加渐变项目 */
const onGradientAdd = () => {
 // console.log("♓ 添加渐变项目");
  /** ★ 新参数 */
  let NewInfo = {
    offset: 50,
    color: "rgba(255,0,0,1)",
  };
  /** ★ 添加 */
  canvasStore.selectedPel.attrs.fill.offsets.push(NewInfo);
};

/** 删除渐变项目 */
const onGradientDelete = (DeleteIndex: any) => {
 // console.log("♓ 删除渐变项目");
  /** ★ 添加 */
  let offsets = canvasStore.selectedPel.attrs.fill.offsets;
  if (offsets.length > 2) {
    for (let index = 0; index < offsets.length; index++) {
      if (Number(DeleteIndex) === index) {
        canvasStore.selectedPel.attrs.fill.offsets.splice(index, 1);
      }
    }
  } else {
    message.error("最小数量，不能删除。");
  }
};
/** 转换图片文件为base64文本 */
const convertFileToBase64 = (file: File, callback: (result: string | null) => void) => {
  // console.log("转换文件为base64文本")
  const reader = new FileReader();

  reader.onload = function () {
    const base64 = reader.result?.toString()//.split(',')[1];
    callback(base64);
  };

  reader.onerror = function (error) {
    console.error('The file cannot be loaded.');
    callback(null);
  };

  reader.readAsDataURL(file);
};

/** 打开文件对话框 */
const onOpenFileDialog = () => {
 // console.log("打开文件对话框")
 // console.log(fileRef.value)
  fileRef.value.dispatchEvent(new MouseEvent("click"));
};

/**  图片导入 */
const onLeadingIn = () => {
 // console.log("图片导入")
 // console.log(fileRef)
 // console.log(fileRef.value.files[0])
  let f = fileRef.value.files[0];
  convertFileToBase64(f, function (result) {
    // console.log(result);
    canvasStore.selectedPel.attrs.imageData.val = result;
  })
};




</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
// 下部图元属性
.down_pel_attr {
  width: 100%;
  max-height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  background-color: rgb(80, 80, 80);
  overflow: hidden;
  user-select: none;

  //笔筒导航
  .down_pel_attr_left {
    width: 300px;
    max-height: 250px;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  //笔筒详情
  .down_pel_attr_right {
    width: 100%;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }
}

.anchor_link {
  margin: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 16px;
}

.h_hover_pointer {
  width: 100%;
  text-align: end;
  font-size: 16px;
  cursor: pointer; // 小手指

  &:hover {
    color: #ffffff;
    border-radius: 3px;
    background-color: #001eff;
  }
}
</style>
